<template>
  <div>
    <!-- 图层 -->

    <div id="wrapper">
      <div :class="{ayz:ayz}"></div>
      <div class="setColors">
        <el-row>
          <!-- 第一层 -->
          <el-col :span="11" class="pink">
            <div class="pinks">
              <div class="grid-content bg-purple">
                <ul class="colorList">
                  <li @click="ayzs" class="ayzs"></li>
                  <li></li>
                </ul>
              </div>
            </div>
          </el-col>
          <!-- 第二层 -->
          <el-col :span="4" class="yellow">
            <div class="grid-content bg-purple-light">nihao</div>
          </el-col>
          <!-- 第三层 -->
          <el-col :span="4" class="skyblue">
            <div class="grid-content bg-purple">xinhao</div>
          </el-col>
          <el-col :span="5" class="blue">
            <div class="grid-content bg-purple">xinhao</div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "color",
  data() {
    return {
      ayz: true,
    };
  },
  methods: {
    ayzs() {
      this.ayz = !this.ayz;
    },
  },
};
</script>
<style lang="less" scoped>
#wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  //   background-image: url("./../../../public/image/color/backgroundImage.png");
  background-size: 100% 100%;
  background-color: #ddd;
}
.setColors {
  margin-top: 63px;
}
.pink {
  //   background-color: rgb(132, 46, 46);
  .pinks {
    margin-left: 15%;

    .colorList {
      li {
        width: 8%;

        border: 1px solid #eee;
        height: 7px;
        display: inline-block;
        padding: 0px 5px 0px 0;
        margin-bottom: 5px;
        margin-left: 15px;
        margin-right: 15px;
        text-align: center;
        line-height: 4px;
        border-radius: 8px;
      }
      .ayzs {
        background-color: #5c2223;
        border: none;
      }
    }
  }
}
.yellow {
  background-color: rgba(51, 125, 165, 0.434);
}
.skyblue {
  background-color: rgb(125, 16, 193);
}
.blue {
  background-color: rgb(16, 31, 193);
}
.ayz {
  width: 100%;
  position: fixed;
  background-color: #5c2223 !important;
  background-size: 100% 100%;
  height: 100%;
  transition: all 2s ease-in;
}
</style>